<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>猪才怪专属网站</title>
		<style type="text/css">
			
			#hell p{
				/* color: orangered; */
				
				text-align: center;
				width: 110px;
				height: 20px;
				border: 1px solid aquamarine;
				border-radius: 5px;
				display: inline-block;
			}
			.enter{
				background-color: blue;
				color: white;
			}
			#op_body div{
				width:350px;
				height: 200px;
				border: 2px solid aqua;
				border-radius: 10px ;
				display: none;
				background-color: rgba(7,17,27,0.3);
				overflow: hidden;
			}
			#lee{
				width:400px;
				padding-top: 200px;;
				margin: 0px auto;
				text-align: center;
				line-height：20px;
				cursor: pointer;
			}
		</style>
		
	</head>
	<body>
		<div id="lee">
			<div id="hell">
				<p class="enter">猪才怪</p>
				<p>猪大妹</p>
				<p>猪肠肠</p>
			</div>
			<div id="op_body">
				<div style="display: block;"><img style="width:100%;height:auto;" src="src/6ca13db2ad37c86d.jpg" ></div>
				<div>大妹就神奇了大妹就神奇了大妹就神奇了大妹就神奇了大妹就神奇了大妹就神奇了大妹就神奇了大妹就神奇了</div>
				<div>你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣你就是渣渣</div>
			</div>
			<div id="text">
				【李伟脚本制作】by leewell 
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var ops=document.getElementById("hell").children;
				var  bods=document.getElementById("op_body").children;
				for(var i=0;i<ops.length;i++){
				
					(function(i){
						ops[i].onclick=function(){
						
						for(var k=0;k<ops.length;k++){
							ops[k].className="";
							bods[k].style.display="none";
						}
						ops[i].className="enter";
						bods[i].style.display="block";
					}
					})(i);
					
				}
			}
		</script>
		
	</body>
</html>
